<template>
    <div id="main">
        <el-container>
            <el-aside class="menu" :width="menuWidth">
                <el-container>
                    <el-aside class="first" width="66px">
                        <div class="logo">
                            <img src="@/assets/image/logo.png">
                        </div>
                        <ul>
                            <li v-for="(menu, index) in menus" @click="menuChange(index)"
                                v-bind:class="{active:index == menuIndex}" :key="index">
                                <div>
                                    <i :class="menu.icon"></i><span>{{menu.text}}</span>
                                </div>
                            </li>
                        </ul>
                    </el-aside>
                    <el-aside class="second" width="200px">
                        <el-scrollbar height="100%">
                            <div class="center">
                                Manager Center
                            </div>
                            <el-divider>Menu</el-divider>

                            <el-menu v-if="menuIndex == 0" :default-active="menuPostion">
                                <router-link to="/home">
                                    <el-menu-item index="1"><i class="i i-home"></i>网站统计</el-menu-item>
                                </router-link>
                                <router-link to="/work">
                                    <el-menu-item index="2"><i class="i i-work"></i>模块路径</el-menu-item>
                                </router-link>
                            </el-menu>

                            <el-menu v-else-if="menuIndex == 1" :default-active="menuPostion">
                                <router-link to="/user">
                                    <el-menu-item index="1"><i class="i i-user"></i>用户管理</el-menu-item>
                                </router-link>
                                <el-submenu index="2">
                                    <template #title><i class="i i-guide"></i>办事指南</template>
                                    <el-menu-item-group>
                                        <template #title>指南</template>
                                        <router-link to="/guideType">
                                            <el-menu-item index="2-1">指南分类</el-menu-item>
                                        </router-link>
                                        <router-link to="/guide">
                                            <el-menu-item index="2-2">指南管理</el-menu-item>
                                        </router-link>
                                    </el-menu-item-group>
                                    <el-menu-item-group>
                                        <template #title>预约</template>
                                        <router-link to="/book">
                                            <el-menu-item index="2-3">预约管理</el-menu-item>
                                        </router-link>
                                    </el-menu-item-group>
                                    <el-menu-item-group>
                                        <template #title>咨询</template>
                                        <router-link to="/seekType">
                                            <el-menu-item index="2-4">咨询分类</el-menu-item>
                                        </router-link>
                                        <router-link to="/seek">
                                            <el-menu-item index="2-5">咨询管理</el-menu-item>
                                        </router-link>
                                    </el-menu-item-group>
                                </el-submenu>
                                <router-link to="/grid">
                                    <el-menu-item index="3"><i class="i i-grid"></i>网格管理</el-menu-item>
                                </router-link>
                                <router-link to="/office">
                                    <el-menu-item index="4"><i class="i i-office"></i>两委管理</el-menu-item>
                                </router-link>
                                <el-submenu index="5">
                                    <template #title><i class="i i-party"></i>党建管理</template>
                                    <router-link to="/partyType">
                                        <el-menu-item index="5-1">党建分类</el-menu-item>
                                    </router-link>
                                    <router-link to="/party">
                                        <el-menu-item index="5-2">党建信息</el-menu-item>
                                    </router-link>
                                </el-submenu>
                                <router-link to="/active">
                                    <el-menu-item index="6"><i class="i i-active"></i>社区动态</el-menu-item>
                                </router-link>
                                <router-link to="/tenancy">
                                    <el-menu-item index="7"><i class="i i-tenancy"></i>房屋租卖</el-menu-item>
                                </router-link>
                            </el-menu>

                            <el-menu v-if="menuIndex == 2" :default-active="menuPostion">
                                <router-link to="/system">
                                    <el-menu-item index="1"><i class="i i-set"></i>系统设置</el-menu-item>
                                </router-link>
                                <el-submenu index="2">
                                    <template #title><i class="i i-banner"></i>轮播图</template>
                                    <router-link to="/bannerHome">
                                        <el-menu-item index="2-1">首页轮播图</el-menu-item>
                                    </router-link>
                                    <router-link to="/bannerGuide">
                                        <el-menu-item index="2-2">指南轮播图</el-menu-item>
                                    </router-link>
                                    <router-link to="/bannerParty">
                                        <el-menu-item index="2-3">党建轮播图</el-menu-item>
                                    </router-link>
                                </el-submenu>
                                <router-link to="/nav">
                                    <el-menu-item index="3"><i class="i i-nav"></i>导航设置</el-menu-item>
                                </router-link>
                                <router-link to="/template">
                                    <el-menu-item index="4"><i class="i i-template"></i>模板消息</el-menu-item>
                                </router-link>
                                <router-link to="/suggest">
                                    <el-menu-item index="5"><i class="i i-suggest"></i>投诉意见</el-menu-item>
                                </router-link>
                                <router-link v-if="main == 1" to="/manager">
                                    <el-menu-item index="6"><i class="i i-manager"></i>管理中心</el-menu-item>
                                </router-link>
                            </el-menu>
                        </el-scrollbar>
                    </el-aside>
                </el-container>
            </el-aside>
            <el-container>
                <el-header>
                    <div class="nav">
                        <i v-if="fold" class="el-icon-s-fold fold" @click="foldToggle"></i>
                        <i v-else class="el-icon-s-unfold fold" @click="foldToggle"></i>
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item v-for="(item, index) in $route.meta" :key="index">
                                <router-link v-if="item.url" :to="item.url">{{item.name}}</router-link>
                                <a v-else>{{item.name}}</a>
                            </el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>

                    <!--<div class="username">
                        <span>
                            <el-badge value="0" :max="9" type="danger">
                                <i class="el-icon-chat-line-round fs18"></i>
                            </el-badge>
                        </span>
                        <span @click="refresh"><i class="el-icon-refresh fs18"></i></span>

                        <el-dropdown trigger="hover">
                            <span class="el-dropdown-link">
                                <img src="@/assets/image/avatar.png" class="avatar">系统管理员
                                <i class="el-icon-arrow-down arrow"></i>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item icon="el-icon-switch-button" @click="logout">退出登录
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>-->
                </el-header>
                <el-main>
                    <el-scrollbar>
                        <router-view></router-view>
                    </el-scrollbar>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import {
        post
    } from '@/network/request'

    export default {
        data() {
            return {
                fold: true, // 菜单折叠
                menuWidth: '266px', // 菜单宽度
                menus: [{
                        text: '首页',
                        icon: 'el-icon-s-home',
                    },
                    {
                        text: '模块',
                        icon: 'el-icon-menu',
                    },
                    {
                        text: '系统',
                        icon: 'el-icon-s-tools',
                    }
                ],
                menuIndex: 0, // 一级菜单索引
                menuPostion: '', // 二级菜单索引
                current: '', // 当前路由
                menuArray0: [
                    'home', 'work'
                ],
                menuArray1: [
                    'user', 'guideType', 'addGuideType', 'editGuideType', 'guide', 'addGuide', 'editGuide', 'book',
                    'seekType', 'addSeekType', 'editSeekType', 'seek', 'grid', 'addGrid', 'editGrid', 'office',
                    'addOffice', 'editOffice', 'partyType', 'addPartyType', 'editPartyType', 'party', 'addParty',
                    'editParty', 'active', 'addActive', 'editActive', 'tenancy', 'addTenancy', 'editTenancy'
                ],
                menuArray2: [
                    'system', 'bannerHome', 'bannerGuide', 'bannerParty', 'nav', 'addNav', 'editNav', 'template',
                    'suggest', 'manager', 'addManager', 'editManager'
                ],
                main: sessionStorage.getItem('main') // 社区主号
            }
        },
        mounted() {
            const path = this.$route.path.substr(1)
            this.navigator(path)
        },
        updated() {
            const path = this.$route.path.substr(1)
            this.navigator(path)
        },
        methods: {
            // 菜单伸缩
            foldToggle() {
                if (this.fold) {
                    this.menuWidth = '66px'
                    this.fold = false
                } else {
                    this.menuWidth = '266px'
                    this.fold = true
                }
            },
            // 刷新页面
            refresh() {
                this.$router.go(0);
            },
            // 退出登录
            logout() {
                post('/logout').then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        sessionStorage.removeItem('token')
                        this.$router.push('/')
                    }
                }).catch()
            },
            // 菜单切换
            menuChange(index) {
                this.menuPostion = '1'
                this.menuIndex = index
                if (index == 0) {
                    this.$router.push('/home')
                } else if (index == 1) {
                    this.$router.push('/user')
                } else if (index == 2) {
                    this.$router.push('/system')
                }
            },
            // 导航跳转
            navigator(path) {
                if (path.indexOf('/') > -1) {
                    this.current = path.substr(0, path.indexOf('/'))
                } else {
                    this.current = path
                }

                this.menuPostion = ''
                if (this.menuArray0.indexOf(this.current) > -1) {
                    this.menuIndex = 0
                } else if (this.menuArray1.indexOf(this.current) > -1) {
                    this.menuIndex = 1
                } else if (this.menuArray2.indexOf(this.current) > -1) {
                    this.menuIndex = 2
                }

                if (this.current == 'home') {
                    this.menuPostion = '1'
                } else if (this.current == 'work') {
                    this.menuPostion = '2'
                }
                if (this.current == 'user') {
                    this.menuPostion = '1'
                } else if (this.current == 'guideType' || this.current == 'addGuideType' || this.current ==
                    'editGuideType') {
                    this.menuPostion = '2-1'
                } else if (this.current == 'guide' || this.current == 'addGuide' || this.current ==
                    'editGuide') {
                    this.menuPostion = '2-2'
                } else if (this.current == 'book') {
                    this.menuPostion = '2-3'
                } else if (this.current == 'seekType' || this.current == 'addSeekType' || this.current ==
                    'editSeekType') {
                    this.menuPostion = '2-4'
                } else if (this.current == 'seek') {
                    this.menuPostion = '2-5'
                } else if (this.current == 'grid' || this.current == 'addGrid' || this.current ==
                    'editGrid') {
                    this.menuPostion = '3'
                } else if (this.current == 'office' || this.current == 'addOffice' || this.current ==
                    'editOffice') {
                    this.menuPostion = '4'
                } else if (this.current == 'partyType' || this.current == 'addPartyType' || this.current ==
                    'editPartyType') {
                    this.menuPostion = '5-1'
                } else if (this.current == 'party' || this.current == 'addParty' || this.current ==
                    'editParty') {
                    this.menuPostion = '5-2'
                } else if (this.current == 'active' || this.current == 'addActive' || this.current ==
                    'editActive') {
                    this.menuPostion = '6'
                } else if (this.current == 'tenancy' || this.current == 'addTenancy' || this.current ==
                    'editTenancy') {
                    this.menuPostion = '7'
                }

                if (this.current == 'system') {
                    this.menuPostion = '1'
                } else if (this.current == 'bannerHome') {
                    this.menuPostion = '2-1'
                } else if (this.current == 'bannerGuide') {
                    this.menuPostion = '2-2'
                } else if (this.current == 'bannerParty') {
                    this.menuPostion = '2-3'
                } else if (this.current == 'nav' || this.current == 'addNav' || this.current ==
                    'editNav') {
                    this.menuPostion = '3'
                } else if (this.current == 'template') {
                    this.menuPostion = '4'
                } else if (this.current == 'suggest') {
                    this.menuPostion = '5'
                } else if (this.current == 'manager' || this.current == 'addManager' || this.current ==
                    'editManager') {
                    this.menuPostion = '6'
                }
            }
        }
    }
</script>

<style>
</style>